<template>
  <div class="article-comments">
      <!-- 当前评论 -->
      <van-cell title="当前评论" :border="false">
          <van-image
              slot="icon"
              round
              width="30"
              height="30"
              style="margin-right: 10px;"
              :src="comment.aut_photo"
              />
              <span style="color: #466b9d;" slot="title">{{ comment.aut_name }}</span>
          <div slot="label">
            <p style="color: #363636;">{{ comment.content }}</p>
              <p>
                <span style="margin-right: 10px;">{{ comment.pubdate | fromNow }}</span>
              </p>
          </div>
          <van-icon slot="right-icon" />
      </van-cell>
      <!-- /当前评论 -->
      <van-divider>全部回复</van-divider>

      <!-- 对当前评论 回复列表 -->
      <van-list
    v-model="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
    >
    <van-cell
        v-for="(item, index) in list"
        :key="index"
        >
        <van-image
            slot="icon"
            round
            width="30"
            height="30"
            style="margin-right: 10px;"
            :src="item.aut_photo"
            />
        <span style="color: #466b9d;" slot="title">{{item.aut_name}}</span>
        <div slot="label">
            <p style="color: #363636;">{{item.content}}</p>
            <p>
                <span style="margin-right: 10px;">{{item.pubdate | fromNow }}</span>
            </p>
        </div>
    </van-cell>
</van-list>
      <!-- 回复列表 -->

      <!-- 发布回复 -->
      <van-cell-group class="publish-wrap">
          <van-field
          v-model.trim="content"
          clearable
          placeholder="请输入回复内容">
              <van-button
              @click="publishFn"
              slot="button"
              size="mini"
              type="info">发布</van-button>
          </van-field>
      </van-cell-group>
      <!-- /发布回复 -->
  </div>
</template>
<script>
import { getCommonToCommon, addCommonToCommon } from '@/api/articleDetail'
export default {
  name: 'CommentReply',
  props: {
    comment: {
      type: Object,
      required: true
    },
    artTd: Number
  },
  data() {
    return {
      list: [], // 评论列表
      loading: false, // 上拉加载更多的 loading
      finished: false, // 是否加载结束
      offset: null,
      content: ''

    }
  },
  methods: {
    async onLoad() {
      const res = await getCommonToCommon(this.comment.com_id, this.off)
      // console.log(res)
      this.list = [...this.list, ...res.data.results]
      this.loading = false
      this.offset = res.data.last_id
      if (res.data.results.length === 0) {
        this.finished = true
      }
    },
    async publishFn() {
      if (!this.content) {
        return this.$toast('回复的内容不能为空')
      }
      const res = await addCommonToCommon(
        this.artId,
        this.comment.com_id,
        this.content)
      console.log(res)
      this.list.unshift(res.data.new_obj)
      this.$toast('发布成功')
      this.content = ''

      this.$emit('addCommonCount')
    }
  }
}
</script>
<style lang="less" scoped>
  // 发表评论的区域是固定在下端的
  .publish-wrap {
      position: fixed;
      left: 0;
      bottom: 0;
      width: 100%;
  }
  // 给发表评论区空出地方
  .van-list {
      margin-bottom: 45px;
  }
</style>
